<script setup>
import { getPurchaseBoardGyslb } from '@/api/visual/purchaseBoard'
import { $formatechartData, fontSize } from '@/utils/globalMethod.js'

const key = ref(1)
const optionData = ref([])
const option = computed(() => ({
  title: {
    text: '供应商类别交易分析表',
    textStyle: {
      color: '#fff',
      fontSize: fontSize(0.16)
    }
  },

  series: [
    {
      name: '供应商类别详情',
      type: 'pie',
      data: optionData.value,
      radius: '60%',
      center: ['50%', '50%'],
      label: {
        show: true,
        formatter: '{b}: {d}%',
        color: '#fff',
        textStyle: {
          fontSize: fontSize(0.12)
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}))

const loadData = async () => {
  const { data } = await getPurchaseBoardGyslb()
  optionData.value = $formatechartData(data, 'ClassName', 'XSTotal')
}

onMounted(loadData)
onMounted(() => {
  window.addEventListener('resize', () => {
    nextTick(() => {
      key.value++
    })
  })
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box7 :key="key">
      <ps-chart2 :option="option"></ps-chart2>
    </dv-border-box7>
  </div>
</template>

<style scoped lang="scss"></style>
